<script setup>
import { reactive, computed,ref } from 'vue'
const msg = ref('Hello World!')
const rawHtml = ref('<span style="color: red">This should be red.</span>')
const dynamicId = ref('id001')
const id = ref('0834drfe')
const isButtonDisabled = ref(true)
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}
const imgstyle = 'width:40em'
const seen = ref(true)
const url = ref('http://baidu.com')

function doSomething() {
  console.log('Hello World!');

  
}

const attributeName = ref('href')
const eventName = ref('focus')


const object = ref({
  id:1
})

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
// 方法
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}



</script>

<template>
  <h3>文本插值</h3>
  <span>Message: {{ msg }}</span>
  <hr>
  <h3>原始HTML</h3>
  <p>Using text interpolation: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  <hr>
  <h3>Attribute绑定</h3>
  <div v-bind:id="dynamicId">{{dynamicId}}</div>
  <h4>简写</h4>
  <div :id="dynamicId">{{dynamicId}}</div>
  <h4>同名简写</h4>
  <div :id>{{id}}</div>
  <div v-bind:id>{{ id }}</div>
  <div v-bind:id = "id">{{ id }}</div>
  <h4>布尔型Attribute</h4>
  <button :disabled="isButtonDisabled">Button</button>
  <button :disabled="!isButtonDisabled">Button</button>
  <h4>动态绑定多个值</h4>
  <div v-bind="objectOfAttrs">{{ objectOfAttrs }}</div>
  <hr>
  <h3>使用JavaScript表达式</h3>
  <div :id="`list-${id}`">{{ `list-${id}` }}</div>
  <div>{{ msg.split('').reverse().join('') }}</div>
  <h3>指令Directives</h3>
  <p v-if="seen">Now you see me</p>
  <h4>参数</h4>
  <a v-bind:href="url"> ... </a>
  <!-- 简写 -->
  <a :href="url"> ... </a>


  <p><a v-on:click="doSomething"> ... </a></p>
  <!-- 简写 -->
  <p><a @click="doSomething"> ... </a></p>

  <h4>动态参数</h4>
  <p><a v-bind:[attributeName]="url">{{ attributeName }}</a></p>
  <!-- 简写 -->
  <p><a :[attributeName]="url">{{ attributeName }}</a></p>

  <h4>动态事件</h4>
  <p><a v-on:[eventName]="doSomething"> ... </a></p>

  <!-- 简写 -->
  <p><a @[eventName]="doSomething"> ... </a></p>

  <div><img :style="imgstyle"   src="./assets/zhiling.png" alt=""></div>

  <hr>
  <p>{{ object.id + 1 }}</p>
  <hr>
  <h3>计算属性</h3>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
  <p>{{ calculateBooksMessage() }}</p>

</template>

<style scoped>
hr{
  margin:1em 0 1.5em 0
}

</style>
